/*
 *@description:图表公共组件
 *@author: liuchenguang
 *@date: 2022-02-11
 *@version: V1.0.0
 说明：
 data:
  chartData: 图表数据
  refName: 图表的ref名称，也可采用传入id的方式进行初始化
 methods:
  initChart: 初始化图表
  addChartEvent: 添加图表事件
*/
import echarts from 'echarts'
import { debounce } from 'tap-ui/src/utils/index'

export const mixin_echarts = {
  data() {
    return {
      // echarts图表
      chartInstance: null,
      // 图表数据
      chartData: {
        title: {}, // 标题
        legend: {}, // 图例
        series: [], // 数据
        xAxis: {}, // 横坐标数据
        yAxis: {}, // Y轴
        grid: {}, // 间隔
        dataZoom: {} // 缩放组件
      },
      // 图表ref键值
      refName: 'echarts',
      // 是否在挂载后绘制图表
      isInitOnMounted: true,
      // 窗口大小变化时，刷新的间隔频率，单位毫秒
      resizeWaitTime: 200
    }
  },
  methods: {
    /** 初始化图表 */
    initChart() {
      /**
       * this.chartData = { ... }
       * this.drawChart()
       */
    },
    /** 绘制图表 */
    drawChart(id) {
      // 通过id或ref加载图表
      if (id) {
        this.chartEl = document.getElementById(id)
      } else if (this.$refs[this.refName]) {
        this.chartEl = this.$refs[this.refName]
      }
      this.chartInstance = echarts.init(this.chartEl, 'light')
      this.addChartEvent()
      this.chartInstance.setOption(this.chartData)
      this.chartInstance.resize()
      this.addResizeEvent()
    },
    /** 添加自定义事件 */
    addChartEvent() {},
    /** 清空数据 */
    clearChart() {
      if (this.chartInstance && this.chartInstance.clear) {
        this.chartInstance.clear()
      }
    },
    /** 添加宽度、高度自适应事件 */
    addResizeEvent() {
      // 防抖处理
      const resizeMethod = debounce(this.chartInstance.resize, this.resizeWaitTime)
      const resizeObserver = new ResizeObserver(resizeMethod)
      resizeObserver.observe(this.chartInstance._dom)
      this.$once('hook:beforeDestroy', () => {
        resizeObserver.disconnect()
      })
    }
  },
  mounted() {
    if (this.isInitOnMounted) {
      this.initChart()
    }
  }
}
